import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Usertree from './Tree'
import Cartab from './Cartab'
import Map from './Map'
import 'antd/dist/antd.css'

import { Layout, Menu, Dropdown, Form, Icon, Input, Button, Checkbox, Row, Col, Breadcrumb } from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const menu = (
    <Menu>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                English
        </a>
        </Menu.Item>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                繁体中文
        </a>
        </Menu.Item>
    </Menu>
);
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: undefined,
          }
    }
    genTreeNode = (parentId, isLeaf = false) => {
        const random = Math.random()
          .toString(36)
          .substring(2, 6);
        return {
          id: random,
          pId: parentId,
          value: random,
          title: isLeaf ? 'Tree Node' : 'Expand to load',
          isLeaf,
        };
      };
    render() {
        return (
            <Layout>
                <Header className="header">
                    <div className="logo" />
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['1']}
                        style={{ lineHeight: '64px' }}
                    >
                        <Menu.Item key="1">监控</Menu.Item>
                        <Menu.Item key="2">统计</Menu.Item>
                        <Menu.Item key="3">管理</Menu.Item>
                    </Menu>
                </Header>
                <Layout>
                    <Sider width={300} style={{ background: '#fff' }}>
                        <div style={{padding:'10px'}}><Usertree/></div>
                        
                        <Cartab/>
                    </Sider>
                    <Layout>
                        <Content
                            // style={{
                            //     background: '#fff',
                            //     padding: 24,
                            //     margin: 0,
                            //     minHeight: 280,
                            // }}
                        >
                           <Map/>
                </Content>
                    </Layout>
                </Layout>
            </Layout>

        );
    }
    
}
export default Main;